<template>
  <div>
        <el-row :gutter="20">
       <el-col :span="24">
        <el-card class="box1" style="height: 64px" shadow="never">
          <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input
            v-model="pageParams.innerCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
          </el-card>
      </el-col>
       <el-col :span="24">
        <el-card class="box2" shadow="never">
      <div class="button">
      <el-button type="primary" @click="isshow = true" icon="el-icon-circle-plus-outline" style="background-color:#ff772f;border:none ">新建</el-button>
        <el-button type="primary" @click="isshow = true" style="background-color:#FBF4F0;border:none;color:#606292  ">批量操作</el-button>
      </div>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号"
      type="index"
      width="120">
    </el-table-column>
    <el-table-column
      prop="innerCode"
      label="设备编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type.name"
      label="设备型号"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      prop="node.name"
      label="详细地址"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      prop="ownerName"
      label="合作商"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      label="设备状态"
      show-overflow-tooltip>
      <template v-slot="{row}">
        <span>{{row.vmStatus === 1 ? '运营' : row.vmStatus === 0 ? '未投放' : '撤机' }}</span>
      </template>
    </el-table-column>
     <el-table-column
      label="操作"
      show-overflow-tooltip>
       <template v-slot="{row}">
       <el-button size="mini" type="text" >货道</el-button>
       <el-button @click="strategy(row)" size="mini" type="text">策略</el-button>
       <el-button @click="modify(row)" size="mini" type="text">修改</el-button>
        </template>
    </el-table-column>
  </el-table>
    <div class="box2box">
    <div><span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span></div>
     <div class="buttonan">
      <el-button type="info" @click="previousPage">上一页</el-button>
      <el-button type="info" @click="nextPage">下一页</el-button>
      </div>
   </div>
      </el-card>
      </el-col>
      </el-row>
      <!-- 新增 -->
      <el-dialog title="新增设备" :visible="isshow" width="630px"  @close="isshow = false">
  <el-form ref="addform" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="设备编号:" >
    <template><span>系统自动生成</span></template>
    </el-form-item>
     <el-form-item prop="nodeId" label="所在区域:">
          <el-select v-model="formData.vmType"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
            v-for="(item, index) in Beverage"
              :key="index"
              :label="item.name"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="所属商圈:"  prop="vmType">
          <el-select v-model="formData.nodeId"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
            v-for="(item, index) in Select"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="isshow = false" class="el-buttonxx">取 消</el-button>
              <el-button @click="addlist" class="el-buttonx">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>
<!-- 策略 -->
<el-dialog title="策略管理" :visible.sync="dialogFormVisible" custom-class="el-dialog" width="630px">
          <template v-if="formxx">
            <el-form :model="formxx">
            <el-row>
              <el-col :span="12">
                <el-form-item label="机械编号：">
                <div>{{formxx.innerCode}}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="策略名称：">
                <div>{{formxx.policyName}}</div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="策略方案：">
               <div>{{formxx.discount}}%</div>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row slot="footer" type="flex" justify="center">
        <el-col :span="1">
          <el-button @click="CancelPolicyx" size="mini" type="warning" plain >取消策略</el-button>
        </el-col>
      </el-row>
          </template>
          <template v-else>
            <el-form label-width="120px">
           <el-form-item prop="nodeId" label="所在区域:">
          <el-select v-model="policyIdd"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
            v-for="(item, index) in selection"
              :key="index"
              :label="item.policyName"
              :value="item.policyId"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
           <el-button @click="dialogFormVisible = false" class="el-buttonxx">取 消</el-button>
              <el-button @click="quedin" class="el-buttonx">确 认</el-button>
              </el-col>
            </el-row>
        </el-form-item>
          </el-form>
          </template>
        </el-dialog>
  <!-- 修改 -->
    <el-dialog title="修改设备" :visible="isshowww" width="630px"  @close="isshowww = false">
  <el-form ref="addform" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="机械编号:" >
    <div>{{formDatalist.innerCode}}</div>
    </el-form-item>
    <el-form-item label="供货时间:" >
    <div>{{formDatalist.createTime}}</div>
    </el-form-item>
    <el-form-item label="设备类型:" >
    <div></div>
    </el-form-item>
    <el-form-item label="设备容量:" >
    <div>11</div>
    </el-form-item>
         <el-form-item label="设备点位:" >
          <el-select v-model="formDatalist.nodeId"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
            v-for="(item, index) in Select"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作商:" >
    <div>11</div>
    </el-form-item>
    <el-form-item label="所属区域:" >
    <div>11</div>
    </el-form-item>
    <el-form-item label="设备地址:" >
    <div>11</div>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="isshowww = false" class="el-buttonxx">取 消</el-button>
              <el-button @click="isshowww = false" class="el-buttonx">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>

  </div>
</template>

<script>
import { getManagement, Beveragemachinemodel, Selectpoint, addDevice, getEmployeeDetail, CancelPolicy, selectionpolicy, ConfirmChoices } from '@/api/management'
export default {
  data () {
    return {
      name: '设备管理',
      isshowww: false,
      dialogFormVisible: false,
      formxx: {},
      isshow: false,
      formData: { // 新增
        createUserId: 1,
        nodeId: '',
        vmType: null
      },
      rules: {
        nodeId: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ],
        vmType: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ]
      },
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: ''
      },
      pageParamss: {
        pageIndex: 1,
        pageSize: 100000
      },
      Beverage: [],
      Select: [],
      tableData: [],
      totalCount: '',
      pageIndex: '',
      totalPage: '',
      // 取消策略
      innerCode: '',
      policyId: '',
      selection: [],
      innerCodeList: '',
      policyIdd: '',
      formDatalist: {}
    }
  },
  created () {
    this.getManagement()
    this.Beveragemachinemodel()
    this.Selectpoint()
    this.selectionpolicy()
  },
  methods: {
    // 修改
    modify (row) {
      this.isshowww = true
      console.log(row)
      this.formDatalist = row
    },
    // 确定
    async quedin () {
      await ConfirmChoices({ innerCodeList: [this.innerCodeList], policyId: this.policyIdd })
      this.dialogFormVisible = false
      this.getManagement()
    },
    // 选择策略
    async selectionpolicy () {
      const res = await selectionpolicy()
      this.selection = res.data
    },
    // 取消策略
    async CancelPolicyx () {
      await CancelPolicy({ innerCode: this.innerCode, policyId: this.policyId })
      this.dialogFormVisible = false
    },
    // 点击策略
    async strategy (row) {
      const res = await getEmployeeDetail(row.innerCode)
      // console.log(row)
      // console.log(res)
      this.innerCodeList = row.innerCode
      this.formxx = res.data
      this.innerCode = res.data.innerCode
      this.policyId = res.data.policyId
      this.dialogFormVisible = true
    },
    // 点击确定
    async addlist () {
      await addDevice({ ...this.formData })
      this.isshow = false
      this.$message.success('添加成功了哦成功')
      this.getManagement()
    },
    // 选择点位
    async Selectpoint () {
      const res = await Selectpoint({ ...this.pageParamss })
      this.Select = res.data.currentPageRecords
    },
    // 饮料机
    async Beveragemachinemodel () {
      const res = await Beveragemachinemodel({ ...this.pageParamss })
      this.Beverage = res.data.currentPageRecords
    },
    // 查询
    onSubmit () {
      this.getManagement()
    },
    // 获取列表
    async getManagement () {
      const res = await getManagement({ ...this.pageParams })
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.pageIndex = res.data.pageIndex
      this.totalPage = res.data.totalPage
      // console.log(res)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.getManagement()
    },
    nextPage () {
      if ((this.totalCount / 10) < this.pageParams.pageIndex) {
        return this.$message.warning('已经是最后一页了')
      }
      this.pageParams.pageIndex++
      this.getManagement()
    }
  }

}
</script>

<style lang="less" scoped>
.box1 {
  margin-bottom: 20px;
}
form {
  margin-top: -7px;
}
.box2box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 96px;
  width: 100%;
  height: 96px;
  span {
        font-size: 16px!important;
    color: #dbdfe5!important;
  }
}
.el-buttonxx {
  background-color: #FBF4F0;
}
.el-buttonx {
  background-color: #FF8739;
}
</style>
